<template>
	<view class="storeBox">
		<view class="top">
			<view class="">
				<view class="">全部门店</view>
        <u-icon name="arrow-down" size="36"></u-icon>
			</view>
			<view class="">
				<u-input type="text" placeholder="请输入门店名称、菜品名称"></u-input>
				<u-icon name="search" size="42" color="#ccc"></u-icon>
			</view>
		</view>
		<view class="commenMenu">
			<view :class="{'check':checkMenuIndex==index}" v-for="(item,index) in menuList" :key="index"
				@click="changeMenuIndex(index)">
				<view class="">{{item.title}}</view>
				<view class="">({{item.storeNum}})</view>
			</view>
		</view>
		<u-icon class="addStore" name="plus-circle" size="120" color="#F1B825"></u-icon>
		<view class="storeBig">
			<view class="storeList" v-for="(item,index) in storeList" :key="item.id">
				<view class="name"> 
          <uni-icons type="shop" color="#E9B949"></uni-icons>
					{{item.shopName}}
				</view>
				<view class="info">
					<image :src="item.foodPic" mode="">
					</image>
					<view class="">
						<view class="">{{item.foodName}}</view>
						<view class="">
							<view>已售: {{item.sales}}份</view>
							<view>限购: {{item.stock}}份</view>
						</view>
						<view class="">¥{{item.price}}</view>
					</view>
					<view class="">
						<view class="">上架</view>
						<view class="">下架</view>
					</view>
				</view>
				<view class="control">
					<view class="">
            <u-icon name="edit-pen" size="42"></u-icon> 编辑
					</view>
					<view class="">
						<u-icon name="file-text" size="42"></u-icon> 复制
					</view>
					<view class="">
						<u-icon name="trash" size="42"></u-icon> 删除
					</view>
				</view>
			</view>
		</view>
		<CommenFooter :checkIndex="0"></CommenFooter>
	</view>
</template>

<script>
	import CommenFooter from '@/components/platformSide/footer/footer.vue'
	export default {
		components: {
			CommenFooter
		},
		data() {
			return {
				checkMenuIndex: 0,
				menuList: [{
						title: '全部商品',
						storeNum: '0'
					},
					{
						title: '上架',
						storeNum: '0'
					},
					{
						title: '下架',
						storeNum: '0'
					},
					{
						title: '限购',
						storeNum: '0'
					},
				],
				storeList: [{
          shopName: 'xxxxx',
          foodPic: 'https://www.yongshantuan.cn/images/yongshan/logo.png',
          foodName: '辣椒炒肉',
          sales: '22',
          stock: '33',
          price: '66',

        }]
			}
		},
		methods: {
			changeMenuIndex(index) {
				this.checkMenuIndex = index;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.storeBox {
		background-color: #F5F5F5;
		padding-bottom: 200rpx;
	}

	.top {
		padding: 20rpx;
		@include flexs(space-between, center);
		background-color: #fff;

		>view {
			@include flexs();

			&:nth-child(1) {
				image {
					width: 20rpx;
					height: 20rpx;
				}

				margin-right: 40rpx;
			}

			&:nth-child(2) {
				flex: 1;
				margin-left: 20rpx;
				@include flexs();

				image {
					width: 50rpx;
					height: 50rpx;
					position: absolute;
					left: 10rpx;
					top: 5rpx;
				}

				border-radius: 50rpx;
				border: 1px solid #eee;
				position: relative;
				overflow: hidden;

				/deep/.u-input__input {
					font-size: 28rpx;
					line-height: 60rpx;
					height: 60rpx;
					min-height: auto !important;
					text-indent: 60rpx;
					background-color: #eee;
				}
			}
		}
	}

	.commenMenu {
		@include flexs();
		padding: 20rpx;
		background-color: #fff;

		>view {
			width: 25%;
			flex-direction: column;
			@include flexs(center, center);

			>view {
				font-size: 32rpx;

				&:nth-child(2) {
					font-size: 24rpx;
					line-height: 2;
				}
			}
		}

		margin-bottom: 40rpx;

		.check {
			color: #F1B825;
			font-weight: bold;
		}
	}

	.storeBig {
		.storeList {
			background-color: #fff;
			padding: 30rpx 20rpx;
			margin-bottom: 20rpx;

			.name {
				@include flexs();

				image {
					width: 40rpx;
					height: 40rpx;
					margin-right: 20rpx;
				}
			}

			.info {
				margin: 20rpx 0;
				@include flexs();

				image {
					width: 160rpx;
					height: 160rpx;
					margin-right: 40rpx;
				}

				>view:nth-child(2) {
					height: 160rpx;
					@include flexs(space-between, flex-start);
					flex-direction: column;
					flex: 1;
					line-height: 1;

					>view:nth-child(1) {
						font-size: 32rpx;
						font-weight: bold;
					}

					>view:nth-child(2) {
						font-size: 28rpx;
						@include flexs();
						color: #666;

						>view:nth-child(1) {
							margin-right: 20rpx;
						}
					}

					>view:nth-child(3) {
						color: red;
						font-weight: bold;
					}
				}

				view:nth-child(3) {
					width: 160rpx;

					>view {
						border: 1px solid #eee;
						font-size: 28rpx;
						line-height: 2;
						border-radius: 50rpx;
						text-align: center;
						margin: 20rpx 0;

						&:nth-child(1) {
							color: #F1B825;
							border: 1px solid #F1B825;
						}
					}
				}
			}

			.control {
				@include flexs();
				border-top: 1px solid #eee;
				padding: 20rpx 0;

				>view {
					width: calc(100% / 3);
					@include flexs(center, center);
					color: rgba(0, 0, 0, .55);

					image {
						width: 30rpx;
						height: 30rpx;
						margin-right: 20rpx;
					}
				}
			}
		}
	}
	.addStore{
		width: 150rpx;
		height: 150rpx;
		border-radius: 50%;
		position: fixed;
		right: 0;
		bottom: 10vh;
	}
</style>
